<template>
	<view class="container">
		<view class="topFixed">
			<view class="topNav d-cw d-ac d-jc">
				<view class="topNav-min d-cw d-ac d-jc">
					<view class="" style="width: 94%;">
						<view class="topNav-min-left d-rn d-ac d-jb">
							<image src="../../static/img/bottom.png" mode="" @click="back"></image>
							<text>{{acceptInfo.performanceName}}</text>
							<image src="" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-one" v-for="(item) in infoList" :key="item.id">
				<view>
					<view class="list-one-title">
						<view>{{$t('evaluator')}}：{{item.nickName}}</view>
						<view class="time">{{item.timeBak}}</view>
					</view>
				</view>
				<view v-for="(ele,index) in item.topicDTOList" :key="index" class="list-all">
					<view class="title">
						<view>{{index+1}}、<span
								v-if="ele.percentage">【{{ele.percentage}}%】</span><span>{{ele.performanceTopic}}</span>
						</view>
						<view class="scoring">{{ele.scoringValue || 0}}分</view>
					</view>
					<view class="comment">
						{{$t('comment')}}：{{ele.performanceReviewRemark || $t('none')}}
					</view>
				</view>
				<view class="comment-all">
					{{$t('total_comment')}}：{{item.overallPerformanceReviewRemark || $t('none')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self
	import {
		getPerformanceInfo
	} from '../../api/index.js'
	import moment from 'moment'
	moment.defineLocale('zh-cn', {
		relativeTime: {
			future: '%s内',
			past: '%s前',
			s: '几秒',
			m: '1分钟',
			mm: '%d分钟',
			h: '1小时',
			hh: '%d小时',
			d: '1天',
			dd: '%d天',
			M: '1个月',
			MM: '%d个月',
			y: '1年',
			yy: '%d年'
		},
	});
	export default {
		data() {
			return {
				acceptInfo: '',
				infoList: [],
				pageNum: 1,
				pageSize: 10,
				hasPage: false,
				total: 0,
				totalPage: 0,
				list: [],
				overallScore: '',
				nowMonth: ''
			}
		},
		onLoad(options) {
			_self = this;
			if (options && options.data) {
				_self.acceptInfo = JSON.parse(decodeURIComponent(options.data))
			}
			var today = new Date();
			_self.nowMonth = today.getMonth() + 1
			// _self.gettopiclists()
			_self.gettableDe()
		},
		computed: {

		},
		methods: {
			onload(options) {
				_self = this;
				_self.acceptInfo = options
				var today = new Date();
				_self.nowMonth = today.getMonth() + 1
				// _self.gettopiclists()
				_self.gettableDe()
			},
			gettableDe() {
				getPerformanceInfo({
					id: _self.acceptInfo.id
				}).then(res => {
					if (res.code == 200) {
						res.data.reviewScordDTOList.forEach(item => {
							if (item.reviewScordTime) {
								item.timeBak = moment(new Date(item.reviewScordTime)).fromNow()
							} else {
								item.timeBak = ""
							}
						})
						_self.infoList = res.data.reviewScordDTOList
					}
				})
			},
			back() {
				_self.$commonFun.goUrl(1, '..performance/index')
			},
			handlereset() {
				_self.infoList.forEach(item => {
					item.rating = ''
					item.comments = ''
				})
				_self.overallScore = ''
			},

		},
		onReachBottom() {
			if (_self.hasPage) {
				_self.pageNum++;
				_self.hasPage = false;
				// _self.gettopiclists()
			}
		}
	}
</script>

<style lang="scss">
	.list-one {
		margin-top: 10rpx;
	}

	.list-one-title {
		display: flex;
		justify-content: space-between;

		.time {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.comment-all {
		color: #666;
		border-bottom: 1px solid #eee;
		line-height: 80rpx;
		background: #fff;
		padding: 0 26rpx;
	}

	.list-all {
		background: #fff;
		padding: 0 26rpx;

		.title {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			color: #666;
			line-height: 80rpx;

			.scoring {
				min-width: 100rpx;
				text-align: right;
			}
		}

		.comment {
			color: #ccc;
			border-bottom: 1px solid #eee;
			line-height: 80rpx;
		}


	}

	page {
		background-color: #f5f5f5;

	}

	.container {
		width: 100%;

		.topFixed {
			width: 100%;
			position: fixed;
			z-index: 60;
			top: 0;
			left: 0;
		}

		// 导航栏
		.topNav {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 100rpx;
			background-color: #FFD03D;

			&-min {
				width: 100%;
				position: absolute;
				left: 0;

				&-left {
					text {
						font-size: 36rpx;
						font-weight: 500;
						color: #17171a;
					}

					image {
						width: 32rpx;
						height: 20rpx;
						transform: rotate(90deg);
					}
				}

				&-right {
					&-picker {
						width: 186rpx;
						padding: 8rpx 24rpx;
						box-sizing: border-box;
						background-color: #FFE182;
						border-radius: 2em;

						.picker-con {
							.uni-input {
								max-width: 112rpx;
								font-size: 28rpx;
								color: #17171a;
							}
						}

						image {
							width: 18rpx;
							height: 10rpx;
							margin-left: 12rpx;
						}
					}
				}


			}
		}

		.list {
			width: 100%;
			margin-top: 120rpx;

			&-one {
				margin-bottom: 20rpx;

				&-title {
					font-size: 32rpx;
					color: #22222b;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eeeeee;
					background-color: #ffffff;
					padding: 24rpx;
					box-sizing: border-box;
				}

				&-mark {
					border-bottom: 1px solid #eeeeee;
					background-color: #ffffff;
					padding: 24rpx;
					box-sizing: border-box;

					text {
						font-size: 28rpx;
						color: #6c6c6c;
					}

					input {
						flex: 1;
						text-align: right;
						margin-right: 10rpx;
					}
				}

				&-word {
					padding: 24rpx;
					box-sizing: border-box;
					background-color: #ffffff;

					text {
						font-size: 28rpx;
						color: #6c6c6c;
					}

					textarea {
						margin-top: 20rpx;
						width: 100%;
						font-size: 28rpx;
						color: #6c6c6c;
					}
				}

			}

			&-ping {
				padding: 24rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				margin-top: 20rpx;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				textarea {
					margin-top: 20rpx;
					width: 100%;
					font-size: 28rpx;
					color: #6c6c6c;
				}
			}



			&-btn {
				width: 100%;
				background-color: #ffffff;
				padding: 24rpx 0;
				box-sizing: border-box;
				margin-top: 20rpx;

				text {
					font-size: 26rpx;
				}

				text:nth-of-type(1),
				text:nth-of-type(2) {
					width: 152rpx;
					height: 58rpx;
					border-radius: 2em;
					border: 1px solid #E5E5E5;
				}

				text:nth-of-type(2) {
					margin: 0 16rpx;
				}

				text:nth-of-type(3) {
					border: 1px solid #FFDA32;
					width: 240rpx;
					height: 58rpx;
					border-radius: 2em;
					background-color: #FFDA32;
				}
			}

		}



	}
</style>